<template>
	<view class="uni_box home">
		<!-- <view class="content">
			<Nheader @getmine="getmine" lei="2" backgroundColor="#d6edff"></Nheader>
			<view class="htwo">
				<u-swiper :list="swlist" height="220"></u-swiper>
			</view>

			<view class="hfour">
				<text class="rentit">任务类型：</text>
				<view class="renlist">
					<view class="renitem" :class="item.isselect?'ractive':''" v-for="(item,index) in renlist" :key="index" @click="renClick(item,index)">
						<text class="renlei">{{item.name}}</text>
						<image class="icon_xz" src="/static/img/icon_xz.png"></image>
					</view>
				</view>

				<view class="kai">
					<view class="kaiview" @click="kaizhuan">开始赚钱</view>
				</view>
			</view>
		</view> -->

		<view class="newone">
			<view class="oneview">
				<text class="appname">项多汇</text>
				<view class="getfabu" @click="fabu">发布名片</view>
			</view>
			<image class="img_rwsc" src="/static/img/img_rwsc.png"></image>
		</view>
		<view class="newtwo">
			<text class="renleiname">任务类型</text>
			<view class="renlist">
				<view class="renitem" :class="item.isselect?'ractive':''" v-for="(item,index) in renlist" :key="index" @click="renClick(item,index)">
					<text class="renlei">{{item.name}}</text>
					<image class="icon_xz" src="/static/img/icon_xz.png"></image>
				</view>
			</view>
			<view class="kaizhuan" @click="kaizhuan">开始赚钱</view>
			<view class="mlist">
				<view class="mitem" v-for="(item,index) in list" :key="index" @click="getnewDetail(item)">
					<image class="zhidinicon" src="/static/img/img_zd.png" mode=""></image>
					<view class="mone">
						<text class="weipeng">{{item.title}}</text>
						<image class="icon_wxicon" src="/static/img/icon_wxicon.png"></image>
						<image class="icon_wxicon" src="/static/img/icon_pyq.png"></image>
						<text class="weiprice">{{item.price}}元</text>
						
					</view>
					<view class="mtwo">
						<text class="sheng">剩余链接{{ item.link_nums }}</text>
						<view class="mr">
							<view class="shua" :class="i=='top'?'zhi':''" v-for="(i,ind) in item.buts">
								<text v-if="i=='refresh'">刷新</text>
								<text v-if="i=='top'">置顶</text>
							</view>
							<!-- <view class="shua zhi">置顶</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    // import MoreFuwu from "@/components/MoreFuwu/MoreFuwu"; 
	export default {
		components:{
			// MoreFuwu
		},
		data() {
			return {
				mshow:false,
				homeinfo:{
					
				},
				iseyes:false,
				token:uni.getStorageSync('token'),
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,

				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				swlist: [
					{
						image: '/static/img/xmfabu.png'
					},
					{
						image: '/static/img/xmfabu.png'
					},
				],
				hList:[
					{id:1,name:'测试站位',img:'/static/img/cone.png'},
					{id:2,name:'测试站位',img:'/static/img/ctwo.png'},
					{id:3,name:'测试站位',img:'/static/img/cthree.png'},
					{id:4,name:'测试站位',img:'/static/img/cfour.png'},
				],
				moreshow:false,
				newinfo:[],
				nlist:[
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				lamp:[
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				renlist:[],
				reninfo:{},

				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
			}
		},
		onLoad() {
			this.getinit()
			this.getList();//首页即可
		},
		onShow() {
			// if(!this.info){
			// 	this.getstatistic();//用户资产
			// }
			
			
		},
		onPullDownRefresh() {
			// console.log("+++")
			// // uni.stopPullDownRefresh();
			// this.getstatistic();//用户资产
			// setTimeout(() => {
			// 	uni.stopPullDownRefresh();
			// }, 1000);
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getinit(){
				this.fcardgetListParams();//名片参数
				this.fgetCateList();//任务类型
			},
			async getList(){
				//获取微信朋友圈任务
				let res = await this.$u.api.quangetQuanInfo({
					page:this.page
				});
				this.last_page = res.lastpage;
				let list = res.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				if(this.page >= this.last_page){
					this.status = 'nomore';
				}	
			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},

			async fcardgetListParams(){
				let res = await this.$u.api.cardgetListParams({
				});
				// console.log(res)
				// this.homeinfo = res
				// let swlist = res.rotation
				// for(let i in swlist){
				// 	swlist[i].image = swlist[i].img
				// }
				// this.swlist = swlist
				// this.newinfo = res.new
				// this.lamp = res.lamp
			},
			async fgetCateList(){
				let res = await this.$u.api.getCateList({
				});
				let data = res
				for(let i in data){
					data[i].isselect = false
				}
				let items = [
				];
				// 要移除的id
				let idToRemove = 16;
				// 使用filter方法移除特定id的对象
				items = data.filter(item => item.id !== idToRemove);
				
				// console.log(items);
				items[0].isselect = true
				this.renlist = items
				// this.renlist = data
				
				// isselect
				// this.reninfo = this.renlist[0]
			},
			async kaizhuan(){
				let renlist = this.renlist
				let renids = []
				for(let i in renlist){
					if(renlist[i].isselect){
						renids.push(renlist[i].id)
					}
				}
				if(renids == ''){
					this.$u.toast("请选择任务类型");
					return false;
				}
				
				let res = await this.$u.api.getTaskId({
					cid:renids.toString()
				});
				console.log(res)
				this.navrouter("/pages_subject/twoPage/RenDetail?renids="+renids.toString()+'&mid='+res);
			},
			getmine(){
				this.mshow = true
				uni.hideTabBar();
			},
			async getnewDetail(item){
				
				let res = await this.$u.api.getTaskIdById({
					id:item.id
				});
				console.log(res)
				this.navrouter("/pages_subject/twoPage/RenDetail?mid="+res);
			},
			mineclose(){
				this.mshow = false
				uni.showTabBar();
			},
			geteyes(){
				this.iseyes = !this.iseyes
			},
			chainrecharge(){
				this.navrouter("/pages/TPage/Chongbi");
			},
			getlogin(){
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			getinvite(){
				this.navrouter("/pages/TPage/Yaoqing?type=home");
			},
			navClick(item){
				let id = item.id
				if(id == 1){
					//AI法务
					this.navrouter("/pages/TPage/gtp");
				}else if(id == 2){
					//案件委托;
					this.navrouter("/pages/TPage/MyWeituo");
				}else if(id == 3){
					//案件咨询
					// this.navrouter("/pages/TPage/AnZixun");
					this.navrouter("/pages/TPage/RenGongzixun");
					
				}else if(id == 4){
					//文书服务
					// this.navrouter("/pages/TPage/Wenshu");
					// this.navrouter("/pages/TPage/MyWenshu");
					this.navrouter("/pages/TPage/SharedLawyer");
				}else if(id == 5){
					//共享律师
					this.navrouter("/pages/tabbar/HeTong");
				}else if(id == 6){
					//法律课堂
					this.navrouter("/pages/TPage/FaKetang");
				}else if(id == 7){
					//违约金计算
					// this.navrouter("/pages/TPage/Weiyuejin");
					this.navrouter("/pages/TPage/VIpGuwen");
				}else if(id == 8){
					//更多服务
					// this.moreshow = true
					//套餐服务
					this.navrouter("/pages/TPage/VIpServices");
				}
			},
			moreclose(){
				this.moreshow = false
			},
			moredetail(item){
				this.navrouter("/pages/TPage/DayMoreDetail?id="+item.id);
			},
			moreClick(){
				this.navrouter("/pages/TPage/DayMore");
			},
			renClick(item,index){
				let renlist = this.renlist
				renlist[index].isselect = !renlist[index].isselect
				// this.reninfo = item
				this.renlist = renlist
			},
			fabu(){
				this.navrouter("/pages_subject/twoPage/FabuMP");
			},


		}
	}
</script>

<style lang="scss" scoped>
	page{
		// background-color: #fff;
		background: linear-gradient(rgb(214, 237, 255), rgb(254, 246, 248));
	}
	.content{
		// background-color: #fff;
		background: linear-gradient(rgb(214, 237, 255), rgb(254, 246, 248));
		padding-bottom: 130rpx;
		min-height: 100vh;
		.asset{
			margin: 50rpx 45rpx;
			.Total-assets{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 16rpx;
				.zileft{
					display: flex;
					flex-direction: column;
					.zione{
						display: flex;
						flex-direction: row;
						align-items: center;
						.zname{
							font-family: Source Han Sans CN;
							font-weight: bold;
							font-size: 30rpx;
							color: #111111;
							display: inline-block;
							margin-right: 15rpx;
						}
						.yan{
							width: 44rpx;
							height: 30rpx;
						}
					}
					.zinum{
						margin-top: 43rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 50rpx;
						color: #111111;
					}
				}
				.tu{
					margin-left: auto;
					width: 173rpx;
					height: 149rpx;
				}
			}
			.lian{
				height: 80rpx;
				background: #030000;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: 60rpx 0 53rpx;
			}
		}

		.htwo{
			padding:20rpx 30rpx 0;
			/deep/.u-indicator-item-round-active {
				// width: 17px;
				background-color: rgba(89, 255, 246, 1);
			}
		}
		.hthree{
			margin: 40rpx 30rpx 0;
			
			.hlist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.hitem{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 25%;
					margin-bottom: 40rpx;
					.hicon{
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 8rpx;
					}
					text{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
		.gongview{
			margin: 30rpx 30rpx 0;
			background: #F5F5F5;
			border-radius: 5rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			.gongicon{
				width: 40rpx;
				height: 40rpx;

			}
			.gxian{
				width: 1rpx;
				height: 20rpx;
				background: #CCCCCC;
				display: inline-block;
				margin: 0 20rpx;
			}
			.gongcont{
				flex: 1;
				display: flex;
				width: 70%;
				/deep/.u-notice-bar{
					padding: 0 !important;
				}
			}
		}
		.refu{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 40rpx;
			.remen{
				margin-right: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.htit{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			display: block;
			
		}
		.hfour{
			padding: 0 30rpx;
			margin-top: 50rpx;
			.rentit{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #111111;
				display: block;
				margin-bottom: 30rpx;
			}
			.renlist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.renitem{
					width: 48.5%;
					height: 75rpx;
					background: #F5F5F5;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					position: relative;
					.renlei{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
					.icon_xz{
						position: absolute;
						right: -3rpx;
						bottom: -3rpx;
						width: 32rpx;
						height: 32rpx;
						display: none;
					}
				}
				.renitem:nth-child(even){
					margin-left: auto;
				}
				.ractive{
					background: rgba(70,178,242,0.1);
					border-radius: 10rpx;
					border: 2px solid #46B2F2;
					.renlei{
						color: #46B2F2;
					}
					.icon_xz{
						display: inline-block;
					}
				}
			}
			.kai{
				width: 414rpx;
				height: 414rpx;
				background: linear-gradient(-41deg, rgba(110, 205, 255, 0.2), rgba(25, 138, 254, 0.2));
				border-radius: 50%;
				// opacity: 0.2;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 100rpx auto;
				.kaiview{
					width: 80%;
					height: 80%;
					border-radius: 50%;
					background: linear-gradient(-41deg, #6ECDFF, #198AFE);
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	// 新样式开始
	.newone{
		background: linear-gradient(41deg, #7DBAFF, #59A7FF);
		height: 374rpx;
		position: relative;
		width: 100%;
		// #ifdef APP-PLUS
		height: 400rpx;
		// #endif
		.oneview{
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 117rpx 0 30rpx 30rpx;
			
			.appname{
				font-weight: bold;
				font-size: 50rpx;
				color: #FFFFFF;
			}
			.getfabu{
				width: 169rpx;
				height: 53rpx;
				background: #FFFFFF;
				border-radius: 27rpx;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #3A96FD;
			}
			
		}
		.img_rwsc{
			position: absolute;
			margin-left: auto;
			right: 69rpx;
			width: 261rpx;
			height: 321rpx;
			bottom: 20rpx;
		}
	}
	.newtwo{
		padding: 40rpx;
		background: #F8F8F8;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		margin-top: -40rpx;
		min-height: 70vh;
		padding-bottom: 120rpx;
		.renleiname{
			display: block;
			text-align: center;
			margin-bottom: 30rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #3A96FD;
		}

		.renlist{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.renitem{
				width: 48.5%;
				height: 75rpx;
				background: rgba(238, 238, 238, 1);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				position: relative;
				.renlei{
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
				.icon_xz{
					position: absolute;
					right: -3rpx;
					bottom: -3rpx;
					width: 32rpx;
					height: 32rpx;
					display: none;
				}
			}
			.renitem:nth-child(even){
				margin-left: auto;
			}
			.ractive{
				background: rgba(70,178,242,0.1);
				border-radius: 10rpx;
				border: 2px solid #46B2F2;
				.renlei{
					color: #46B2F2;
				}
				.icon_xz{
					display: inline-block;
				}
			}
		}
	}
	.kaizhuan{
		height: 88rpx;
		background: #3A96FD;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}
	.mlist{
		.mitem{
			padding: 30rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 9rpx 0rpx rgba(95,114,144,0.16);
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			position: relative;
			.mone{
				display: flex;
				flex-direction: row;
				align-items: center;
				.weipeng{
					font-weight: bold;
					font-size: 36rpx;
					color: #1A1A1A;

				}
				.icon_wxicon{
					margin-left: 20rpx;
					width: 32rpx;
					height: 32rpx;
				}
				.weiprice{
					margin-left: auto;
					font-weight: bold;
					font-size: 36rpx;
					color: #FF2929;

				}
			}
			.mtwo{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 15rpx;
				.sheng{
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}
				.mr{
					margin-left: auto;
					display: flex;
					flex-direction: row;
					align-items: center;
					.shua{
						padding: 5rpx 25rpx;
						border-radius: 22rpx;
						border: 1px solid #3A96FD;
						font-weight: 500;
						font-size: 24rpx;
						color: #3A96FD;
						margin-left: 20rpx;
					}
					.zhi{
						background: #3A96FD;
						color: #fff;
					}
				}
			}
		}
	}
	.zhidinicon{
		position: absolute;
		width: 61rpx;
		height: 58rpx;
		right: 0;
		top: 0;
	}
</style>
